<template>
  <header>
    <el-form-item label="角色名:" label-width="69px" class="label-right-align">
      <el-input v-model="queryData.roleName" type="text" clearable></el-input>
    </el-form-item>

    <el-button @click.prevent="queryRoleList">
      <el-icon><Search /></el-icon>
      <span>查询</span>
    </el-button>

    <el-button>
      <el-icon><DocumentAdd /></el-icon>
      <span>增加</span>
    </el-button>

    <el-button>
      <el-icon><Delete /></el-icon>
      <span>删除</span>
    </el-button>

    <el-button>
      <el-icon><Setting /></el-icon>
      <span>分配权限</span>
    </el-button>
  </header>
  <el-table
    ref="tableInfo"
    :data="tableData"
    style="width: 100%"
    stripe
    border
    :height="docHeight"
    @sort-change="tabelSort"
  >
    <el-table-column prop="roleUuid" label="角色编码" width="50" type="selection" />
    <el-table-column prop="roleName" label="角色名称" width="180" sortable="custom" />
    <el-table-column prop="remarks" label="备注" width="180" sortable="custom" />
    <el-table-column prop="roleUuid" label="操作">
      <template #default="obj">
        <el-button link type="primary" size="small"> 编辑 </el-button>

        <el-button link type="success" size="small"> 删除 </el-button>

        <el-button link type="primary" size="small"> 分配 </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    layout="total,sizes,->,prev, pager, next,jumper"
    :total="total"
    :default-page-size="queryData.rp"
    :page-sizes="[10, 20, 50, 100]"
    v-model:current-page="queryData.page"
    @change="pageChang"
  />
</template>
<script setup lang="ts">
import axios from "axios";
import $ from "jquery";
import { onMounted, reactive, ref,type Ref } from "vue";
import type { ElTable,RoleEntity,TableSortEntity } from "../model/EduEntity";
//查询条件
const queryData = reactive({
  page: 1,
  rp: 10,
  sortname: "",
  sortorder: "asc",
  roleName: "",
});
//列表数据
let tableData:RoleEntity[] = reactive([]);
//总数量
const total = ref(0)
//查询角色列表请求
const queryRoleList = () => {
  axios
    .post("/api/role/queryRoleListByPage", queryData)
    .then((data) => {
      let rst:ElTable<RoleEntity> = data.data as ElTable<RoleEntity>;
      if (rst) {

        total.value = rst.total
        queryData.page = rst.page
        tableData.splice(0,tableData.length)
        rst.rawRecords.some((item:RoleEntity)=>{
          tableData.push(item);
        })
        // tableData = reactive([... rst.rawRecords])
      }
    })
    .catch((err) => {
      console.error(`queryRoleListByPage fail:${JSON.stringify(err)}`);
    }); //发送查询
};
//当page变化触发
const pageChang = (currentPage:number, pageSize:number)=>{
  queryData.rp = pageSize;
  queryData.page = currentPage;
  queryRoleList();
}

let docHeight = ref(0);
//挂载
onMounted(() => {
  //获取docment高度
  let sHeight:number | undefined =  $(document).height()
  if(sHeight){
    docHeight.value = sHeight - 25 - 40 - 100;
  }
  //查询角色列表
  queryRoleList();
});

//排序
const tabelSort = (data:TableSortEntity)=>{
  queryData.sortname = data.prop;
  queryData.sortorder = "asc";
  if (data.order === "descending") {
    queryData.sortorder = "desc";
  }
  queryRoleList();
}
</script>
<style scoped>
.btn > i {
  margin-right: 5px;
}
.btn {
  margin: 5px;
}
header {
  display: flex;
}
.el-button {
  margin: 2px 0 0 5px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
<style></style>
